<template>
  <div id="app" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp" @mouseleave="mouseLeave" @mouseenter="mouseEnter">
    <div class="folders">
      <file v-for="file,index in foldersData" :data="file" :key="index" v-on:contextmenu="showMenu(index,$event)"
        :ref="'file'+index" :index="index"></file>
    </div>
    <div class="selector-panel" :style="spPosition" :hidden="selectorHidden"></div>
    <div class="menu" :hidden="menuHidden" :style="{left:menuLeft+'px',top:menuTop+'px'}">
      <div class="item" @click.stop="edit" @mousedown.stop>编辑</div>
      <div class="item" @mousedown.stop>无用菜单 1</div>
      <div class="item" @mousedown.stop>无用菜单 2</div>
      <div class="item" @mousedown.stop>无用菜单 3</div>
    </div>
  </div>
</template>

<script>
import file from '@/components/file.vue';
export default {
  name: 'App',
  components:{file},
  data(){
    return {
      menuHidden:true,
      menuLeft:0,
      menuTop:0,

      startPoint:null,
      endPoint:null,
      selectorHidden:true,
      spPosition:{
        left:0,top:0,right:0,bottom:0
      },
      menusFile:null,
      foldersData:[
        {name:'文件夹1',type:'folder'},
        {name:'文件夹2',type:'folder'},
        {name:'文件夹3',type:'folder'},
        {name:'文件',type:'file'}
      ]
    }
  },
  methods:{
    showMenu(index,event){
      this.menuHidden = false;
      this.menuLeft = event.clientX;
      this.menuTop = event.clientY;
      this.$refs['file'+index][0].select();
      this.menusFile = this.$refs['file'+index][0];
    },
    edit(){
      this.menusFile.edit = true;
      this.menuHidden = true;
    },
    mouseDown(event){
      this.unSelectAll(event);
      this.menuHidden = true;
      this.startPoint = {
        x:event.clientX,y:event.clientY
      }
      // this.spPosition.left = event.clientX+'px';
      // this.spPosition.top = event.clientY+'px';
      // this.selectorHidden = false;
      // this.computedPosition();
    },
    mouseMove(event){
      this.endPoint = {
        x:event.clientX,y:event.clientY
      }
      // console.log('mouseMove');
      // this.spPosition.right = window.innerWidth-event.clientX+'px';
      // this.spPosition.bottom = window.innerHeight-event.clientY+'px';
      this.computedPosition();
    },
    computedPosition(){
        // console.log(this.startPoint , this.endPoint);
      if(this.startPoint && this.endPoint){
        this.selectorHidden = false;
        let left,top,right,bottom;
        if(this.endPoint.x>this.startPoint.x){
          left = this.startPoint.x;
          right = window.innerWidth-this.endPoint.x;
        }else{
          left = this.endPoint.x;
          right = window.innerWidth-this.startPoint.x;
        }
        if(this.endPoint.y>this.startPoint.y){
          top = this.startPoint.y;
          bottom = window.innerHeight-this.endPoint.y;
        }else{
          top = this.endPoint.y;
          bottom = window.innerHeight-this.startPoint.y;
        }

        this.spPosition.left = left+'px';
        this.spPosition.top = top+'px';
        this.spPosition.right = right+'px';
        this.spPosition.bottom = bottom+'px';

        //检测碰撞
        let checkPoint = (point)=>{
          if(point.x>left&&point.x<window.innerWidth-right && point.y>top&&point.y<window.innerHeight-bottom){
            return true;
          }
        }

        for(let index=0;index<this.foldersData.length;index++){
          let {offsetWidth,offsetHeight,offsetLeft,offsetTop} = this.$refs['file'+index][0].$el;
          let points = [];
          //四个角监测点
          points.push({x:offsetLeft,y:offsetTop});
          points.push({x:offsetLeft+offsetWidth,y:offsetTop});
          points.push({x:offsetLeft+offsetWidth,y:offsetTop+offsetHeight});
          points.push({x:offsetLeft,y:offsetTop+offsetHeight});

          //多检测一个中心点可以稍微优化框选精度，但是始终无法达到操作系统那样精确，回头我再考虑
          points.push({x:offsetLeft+offsetWidth/2,y:offsetTop+offsetHeight/2});
          let isIn = false;
          for(let point of points){
            if(checkPoint(point)){
              isIn = true;
              break;
            }
          }
          if(isIn){
            this.$refs['file'+index][0].select();
          }else{
            this.$refs['file'+index][0].unSelect();
          }
        }
      }
      
    },
    mouseLeave(){
      this.stopSelector();
      // console.log('mouseLeave');
    },
    mouseEnter(){
      // console.log('mouseEnter');
    },
    mouseUp(){
      this.stopSelector();
      // console.log('mouseUp');
    },
    stopSelector(){
      this.startPoint = null;
      this.endPoint = null;
      this.selectorHidden = true;
    },
    unSelectAll(event){
      let currentFileIndex = null;
      if(event){
        for(let ele of event.path){
          if(typeof ele.className=='string'&&ele.className.indexOf('file')>-1){
            currentFileIndex = ele.getAttribute('index');
          }
        }
      }
      for(let index=0;index<this.foldersData.length;index++){
        if(currentFileIndex!=null){
          if(index==currentFileIndex){
            continue;
          }
        }
        this.$refs['file'+index][0].unSelect();
      }
    }
  }
}
</script>

<style lang="scss">
.folders{
  background-color: rgb(35,35,35);
  color:#fff;
  border:1px solid #999;
  height:100%;
  padding:20px;
  box-sizing: border-box;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fill,7em);
  grid-template-rows: repeat(auto-fill,7.5em);
  grid-auto-flow: column;
  align-content:start;
  grid-gap:1em;
  overflow: auto;
  
}
.selector-panel{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  background-color:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
}
</style>
